<template>
    <div class='musicinfobody' v-show='musicinfoflag'>
        <div class='backbtn' @click='back'>
            <i class='el-icon-arrow-left'></i>
        </div>
        <div class='songdetail'>
            <div class='songname'>{{$store.state.nowsongInfo.songname}}</div>
            <div class='singername'>{{$store.state.nowsongInfo.singername}}</div>
        </div>
        <div class='lyric'></div>
    </div>
</template>

<script>
  export default {
    name: 'musicinfo',
    props: ['musicinfoflag'],
    data() {
      return {}
    },
    created() {
      this.getLyric()
    },
    methods: {
      // 后退按钮
      back() {
        this.$emit('func');
      },
      //  获取歌词
      getLyric() {
        // ？？？接口读取出的data为空

        this.$axios.post(this.HOSTLyric + '/yy/index.php?r=play/getdata&hash=' + this.$store.state.nowsongInfo.hash).then(res => {
          console.log(res);
          console.log(this.$store.state.nowsongInfo.hash)
        })
      }
    }
  }
</script>

<style scoped>
    .musicinfobody {
        position: fixed;
        top: 0;
        height: 100vh;
        background-color: #000;
        width: 100%;
    }

    .backbtn {
        position: fixed;
        height: 3rem;
        width: 4rem;
        padding-left: 1rem;
        line-height: 3rem;
    }

    .songdetail {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 4rem;
        text-align: center;
    }

    .songname {
        color: rgb(255, 205, 50);
        padding-top: 0.7rem;
        padding-bottom: 0.5rem;
    }

    .singername {
        color: lightgrey;
    }
</style>
